import React from 'react';
import {
    Divider,
    ColorPicker,
    Radio,
    InputNumber,
    Select,
    Tag
} from 'antd'


import { FontFamilyMapping, FontWeightMapping, FontStyleMapping, IsHiddenMapping, UserDropdownNavMapping } from '../Config/theme'

import { themeStore } from '../Config/zustand'

const UserAvatarTriggerMapping = [
    { value: 'click', label: '点击' },
    { value: 'hover', label: '移入' },
    { value: 'contextMenu', label: '右键' },
]

const UserAvatarShapeMapping = [
    { value: 'circle', label: '圆形' },
    { value: 'square', label: '圆角' },
]

const SetSystemUSER = () => {
    const { head, updateHead } = themeStore()

    const { userList, userIsSignOut } = head
    const { trigger, userRoleIsOut, userNameIsOut, userAvatarIsIn, shape } = head
    const { roleColor, roleFamily, roleWeight, roleStyle, roleSize, roleShadowX, roleShadowY, roleShadowS, roleShadowB } = head
    const { nameColor, nameFamily, nameWeight, nameStyle, nameSize, nameShadowX, nameShadowY, nameShadowS, nameShadowB } = head

    const HeadFunc = (key, value) => {
        head[key] = value
        updateHead(head)
    }

    const tagChange = (value, state) => {
        const nextSelectedTags = state ? [...userList, value] : userList.filter((t) => t !== value)
        head.userList = nextSelectedTags
        updateHead(head)
    }

    return (
        <div className='SetSystemUSER'>
            <Divider orientation="left">头像操作</Divider>
            <div className='Content'>
                <div>
                    <div className='title'>外层设置</div>
                    <div className='Label' >
                        <div>操作方式</div>
                        <Radio.Group value={trigger} buttonStyle="solid" onChange={e => HeadFunc('trigger', e.target.value)}>
                            {UserAvatarTriggerMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    <div className='Label' >
                        <div>外部角色</div>
                        <Radio.Group value={userRoleIsOut} buttonStyle="solid" onChange={e => HeadFunc('userRoleIsOut', e.target.value)}>
                            {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    <div className='Label' >
                        <div>外部姓名</div>
                        <Radio.Group value={userNameIsOut} buttonStyle="solid" onChange={e => HeadFunc('userNameIsOut', e.target.value)}>
                            {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    <div className='Label' >
                        <div>内部头像</div>
                        <Radio.Group value={userAvatarIsIn} buttonStyle="solid" onChange={e => HeadFunc('userAvatarIsIn', e.target.value)}>
                            {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    <div className='Label' >
                        <div>头像状态</div>
                        <Radio.Group value={shape} buttonStyle="solid" onChange={e => HeadFunc('shape', e.target.value)}>
                            {UserAvatarShapeMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    <div className='Label' >
                        <div>退出按钮</div>
                        <Radio.Group value={userIsSignOut} buttonStyle="solid" onChange={e => HeadFunc('userIsSignOut', e.target.value)}>
                            {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    <div>
                        <div className='listTitle'>可操作列表</div>
                        <div className='userNavList'>
                            {UserDropdownNavMapping.map(({ value, label }) =>
                                <Tag.CheckableTag key={value} checked={userList.includes(value)} onChange={e => tagChange(value, e)} >
                                    {label}
                                </Tag.CheckableTag>
                            )}
                        </div>
                    </div>
                </div>
                <div>
                    <div className='title'>角色文字</div>
                    <div className='Label'>
                        <div>文字颜色</div>
                        <ColorPicker value={roleColor} onChangeComplete={e => HeadFunc('roleColor', e.toHexString())} />
                    </div>
                    <div className='Label'>
                        <div>文字字体</div>
                        <Select value={roleFamily} options={FontFamilyMapping} onChange={e => HeadFunc('roleFamily', e)} />
                    </div>
                    <div className='Label'>
                        <div>文字加粗</div>
                        <Select value={roleWeight} options={FontWeightMapping} onChange={e => HeadFunc('roleWeight', e)} />
                    </div>
                    <div className='Label'>
                        <div>文字倾斜</div>
                        <Select value={roleStyle} options={FontStyleMapping} onChange={e => HeadFunc('roleStyle', e)} />
                    </div>
                    <div className='Label' >
                        <div>文字字号</div>
                        <InputNumber value={roleSize} onChange={e => HeadFunc('roleSize', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影X轴</div>
                        <InputNumber value={roleShadowX} onChange={e => HeadFunc('roleShadowX', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影Y轴</div>
                        <InputNumber value={roleShadowY} onChange={e => HeadFunc('roleShadowY', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影尺寸</div>
                        <InputNumber value={roleShadowS} onChange={e => HeadFunc('roleShadowS', e)} />
                    </div>
                    <div className='Label'>
                        <div>阴影颜色</div>
                        <ColorPicker value={roleShadowB} onChangeComplete={e => HeadFunc('roleShadowB', e.toHexString())} />
                    </div>
                </div>
                <div>
                    <div className='title'>名称文字</div>
                    <div className='Label'>
                        <div>文字颜色</div>
                        <ColorPicker value={nameColor} onChangeComplete={e => HeadFunc('nameColor', e.toHexString())} />
                    </div>
                    <div className='Label'>
                        <div>文字字体</div>
                        <Select value={nameFamily} options={FontFamilyMapping} onChange={e => HeadFunc('nameFamily', e)} />
                    </div>
                    <div className='Label'>
                        <div>文字加粗</div>
                        <Select value={nameWeight} options={FontWeightMapping} onChange={e => HeadFunc('nameWeight', e)} />
                    </div>
                    <div className='Label'>
                        <div>文字倾斜</div>
                        <Select value={nameStyle} options={FontStyleMapping} onChange={e => HeadFunc('nameStyle', e)} />
                    </div>
                    <div className='Label' >
                        <div>文字字号</div>
                        <InputNumber value={nameSize} onChange={e => HeadFunc('nameSize', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影X轴</div>
                        <InputNumber value={nameShadowX} onChange={e => HeadFunc('nameShadowX', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影Y轴</div>
                        <InputNumber value={nameShadowY} onChange={e => HeadFunc('nameShadowY', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影尺寸</div>
                        <InputNumber value={nameShadowS} onChange={e => HeadFunc('nameShadowS', e)} />
                    </div>
                    <div className='Label'>
                        <div>阴影颜色</div>
                        <ColorPicker value={nameShadowB} onChangeComplete={e => HeadFunc('nameShadowB', e.toHexString())} />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default SetSystemUSER;